<template>
  <div class="netBox wrap scrollBar">
    <div class="topCon">
      <div class="title">音频协议</div>
      <div class="setForm setF">
        <el-radio v-model="radio1" label="1">G.711 A-Law</el-radio>
        <el-radio v-model="radio2" label="2">G.711 U-Law</el-radio>
        <el-radio v-model="radio3" label="3">ACC</el-radio>
      </div>
    </div>
    <div class="bottomCon">
      <div class="title">视频协议</div>
      <div class="setForm setF">
        <el-radio v-model="radio1" label="1">H.263</el-radio>
        <el-radio v-model="radio2" label="2">H.264BP</el-radio>
        <el-radio v-model="radio3" label="3">H.264HP</el-radio>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/baseConfig.less";
export default {
  name: "mediaconfig",
  data() {
    return {
      radio1: "1",
      radio2: "2",
      radio3: "3",
    };
  },
};
</script>
<style lang="less">
.netBox {
  .setF {
    .el-radio {
      width: 120px;
    }
    .el-radio__input.is-checked .el-radio__inner {
      border: 2px solid #527dff;
      background-color: #fff;
    }
    .el-radio__inner::after {
      background-color: #527dff;
      width: 6px;
      height: 6px;
    }
    .el-radio__input.is-checked + .el-radio__label {
      color: #4c5967;
    }
  }
}
</style>
<style lang='less' scoped>
.netBox {
  .topCon {
    height: 280px;
  }
  .bottomCon {
    height: 280px;
  }
  .setForm {
    width: 500px;
    height: 100px;
    margin: 90px auto;
  }
}
</style>
